import { Box, Link, Typography } from '@mui/material';

export default function InstallMetamask() {
    return (
        <>
            <style jsx global>{`
                .container-galaxy {
                    height: calc(100vh);
                    background-image: url(/bg-manager.svg);
                    background-size: cover;
                }
            `}</style>
            <Box className={'container-galaxy'}>
                <Box className="d-flex justify-content-center align-items-center flex-column h-100">
                    <a href="https://metamask.io/download/" target="_blank" rel="noreferrer">
                        <Box
                            component="img"
                            sx={{
                                height: 100,
                                width: 100,
                            }}
                            alt="Icon"
                            src={'/metamask.png'}
                        />
                    </a>
                    <Typography
                        variant="body1"
                        align="center"
                        sx={{
                            width: 500,
                            pt: 2,
                            ['@media (max-width:768px)']: {
                                width: 400,
                            },
                        }}
                    >
                        Metamask is not installed. Please visit this{' '}
                        <Link href="https://metamask.io/download/" target="_blank" rel="noreferrer">
                            link
                        </Link>{' '}
                        to install and set-up your wallet.
                    </Typography>
                </Box>
            </Box>
        </>
    );
}
